<template>
	<view class="container">
		<BSseMessage @receiveOrder="handleReceiveOrder"/>
		<view class="account">
		    <view class="money">
				<view class="number">
					<text>500</text>
				</view>
				<view class="text">
					<text>今日流水</text>
				</view>
			</view>
		    <view class="order">
				<view class="number">
					<text>10</text>
				</view>
				<view class="text">
					<text>今日接单</text>
				</view>
			</view>
			<view class="time">
				<view class="number">
					<text>5.2</text>
				</view>
				<view class="text">
					<text>在线时长</text>
				</view>
			</view>
		</view>
		<view class="table">
			<view class="one">
				<view class="table-item" @click="goToPage('/pages/map')">
					<text class="iconfont icon-dingwei icon-style"></text>
					<text>地图</text>
				</view>
				<view class="table-item" @click="goToPage('/pages/my')">
					<text class="iconfont icon-tijiaoyanzi icon-style"></text>
					<text>钱包</text>
				</view>
			</view>
		    <view class="two">
		    	<view class="table-item" @click="goToPage('/pages/orderInfo')">
		    		<text class="iconfont icon-dingdan1 icon-style"></text>
		    		<text>订单</text>
		    	</view>
		    	<view class="table-item" @click="goToPage('/pages/my')">
		    		<text class="iconfont icon-tianxuangouren icon-style"></text>
		    		<text>个人中心</text>
		    	</view>
		    </view>
		</view>
		<view class="operation">
		    <template v-if="workStatus === 1">
		        <view class="desc">听单中...</view>
		        <button class="btn btn__waring" @click="handleWorkStatus(0)">收车</button>
		    </template>
		    <template v-else>
		        <view class="desc">勤劳的小蜜蜂，要开始工作了吗？</view>
		        <button class="btn " @click="handleWorkStatus(1)">出车</button>
		    </template>
		</view>
	</view>
</template>
<script setup>
import UEmpty from '../component/UEmpty.vue';
import BSseMessage from '../component/BSseMessage.vue';
import {computed, onMounted, ref} from 'vue';
import { useStore } from 'vuex';
import { ApiPostToPickUpPassenger,ApiGetCurrentOrder } from '../api/order';
import { HandleApiError } from '../utils';
import { _FormatDate } from '@gykeji/jsutil';
import { ApiGetWorkStatus, ApiPostUpdateWorkStatus, ApiPostUpdatePoint, ApiGetUserCarInfo } from '../api/user';
const $store = useStore();
const userInfo = computed(()=> $store.state.userInfo);
let workStatus = ref(null);
let orderId = null;

onMounted(()=>{
	getUserCarInfo();
})

const handleReceiveOrder = (arg) =>{
	orderId = arg.orderId;
    uni.redirectTo({url:`/pages/orderDetail?orderId=${orderId}`});
}

const getUserCarInfo = async () =>{
	const {error, result} = await ApiGetUserCarInfo();
	if(result){
		$store.commit('setUserInfo',result);
		getWorkStatus();
		getUserProgressOrder();
		updatePoint();
		
        // 测试用
		testUpdatePoint({
			lat: '43.841',
			lng: '87.749',
			name: '博达校区'
		});
	}
}
const getWorkStatus = async () =>{
    const {error, result} = await ApiGetWorkStatus({
        driverId : userInfo.value.driverId
    });
    workStatus.value = result.workStatus;
}


const getUserProgressOrder = async () => {
    const { error, result } = await ApiGetCurrentOrder();
    if (!HandleApiError(error) && result != null && !result.hasOwnProperty("code")) {
		orderId = result.id;
        uni.redirectTo({url:`/pages/orderDetail?orderId=${orderId}`})
    }
}

/**
 * @Description: 上报当前位置 测试用
 * @param {*} lng
 * @param {*} lat
 * @param {*} name
 * @return {*}
 */
const testUpdatePoint = async ({lng,lat,name})=>{
	const {error} = await ApiPostUpdatePoint({
		carId: userInfo.value.carId,
		points: [{
			location: `${lng},${lat}`,
			locatetime: new Date().getTime()
		}]
	})
	if(!error){
		$store.commit('setPoint',{lng,lat, name})
	}
}

/**
 * @Description: 定时5秒上报当前位置
 * @return {*}
 */
const updatePoint = ()=>{
	uni.getLocation({
		type: 'gcj02',
		geocode: true,
		success: async (result) =>{
			const {error} = await ApiPostUpdatePoint({
				carId: userInfo.value.carId,
				points: [{
					location: `${result.longitude},${result.latitude}`,
					locatetime: new Date().getTime()
				}]
			});
			if(!error){
				$store.commit('setPoint',{ lng:result.longitude, lat:result.latitude, name:result.city})
			}
			setTimeout(()=>{
				updatePoint()
			}, 5000)
		}
	});
}

const handleWorkStatus = async (status) =>{
    const {error, result} = await ApiPostUpdateWorkStatus({
        driverId : userInfo.value.driverId,
        workStatus: status
    });
    if(!HandleApiError(error)){
        workStatus.value = status;
    }
    
}

const goToPage = (page) => {
	  uni.navigateTo({
		url: page
	  });
    }
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx 40rpx;
	}
	.account{
		height: 150rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
	}
	
	.account .number{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 50rpx;
	}
	
	.account .text{
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
	}
	
	.table {
	    margin-top: $uni-spacing-max;
		.one,
		.two {
		    display: flex;
		    justify-content: space-around;
			margin-top: 50rpx;
		}
			
	    &-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 35%;
			height: 180rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			// border: 1px solid $uni-border-color;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
			cursor: pointer;
			.icon-style{
				font-size: 60rpx; 
				margin-bottom:15rpx;
				color: #f0ad4e;
			}
	    }
	}
	
	.operation{
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		text-align: center;
		.desc{
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
		}
		.btn{
			width: 200rpx;
			height: 200rpx;
			line-height: 180rpx;
			border-radius: 50%;
			background: $uni-color-primary;
			color: $uni-text-color-inverse;
			font-size: 46rpx;
			margin-top: 30rpx;
			&::after{
				box-shadow: none;
			}
			&__waring{
				background: $uni-color-warning;
			}
		}
	}
</style>